<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="template">
<head>
    <title>预约检车详情</title>
    <link rel="stylesheet" href="../css/stationDetail.css" />
    <link rel="stylesheet" href="../css/orderDetail.css" />
    <script src="../js/stationDetail.js"></script>
    <!--<script src="../js/selectType.js"></script>-->
    <script type="text/javascript" src="../js/pager_new.js"></script>
</head>
<body id="orange">
<div class="container">
    <div class="content">
        <div class="container-right" layout:fragment="content">
            <div class="crumbs">
                <ul>
                    <li><a href="/index/home" th:text="#{StationDetailHtml.home}" >首页</a><i class="triangle-icon"></i></li>
                    <li><a href="/introduction" th:text="#{StationDetailHtml.intelligentVehicle}" >智能检车</a><i class="triangle-icon"></i></li>
                    <li class="active"><a href="#" th:text="#{StationDetailHtml.reservationVehicle}" >预约检车</a></li>
                </ul>
            </div>
            <div class="inspection-station">
                <div hidden="hidden">
                    <input id="stationId" th:value="${stationId}" hidden="hidden"/>
                </div>
                <img  th:src ="${stationDetail.image}" class="img-title" alt="" />
                <div class="inspection-station-detail">
                    <h1 th:text="${stationDetail.stationname}"></h1>
                    <div class="inspection-station-detail-title">
                        <p><label th:text=" '' + #{StationDetailHtml.telephone} + ${stationDetail.telephone}"></label></p>
                        <p><label th:text=" '' + #{StationDetailHtml.address} + ${stationDetail.address}" ></label></p>
                        <div class="classification classificate">
                            <div class="type">
                                <label th:text="#{StationDetailHtml.vehicleType}" >车辆类型</label>
                                <ul  class="selectCar" id="carType">
                                    <li class="active" th:if = "${smallCarFlg} == 0" id = "smallCar" th:attr="data-id= ${smallCarId}, data-cost= ${smallCarCost}">
                                        <img src="/img/carTypeOne.png" alt="" style="display: none" />
                                        <img src="/img/carTypeOne_select.png" alt="" th:text="#{StationDetailHtml.smallCar}" />
                                    </li>
                                    <li id = "overSizeVehicle" th:if = "${overSizeVehicleFlg} == 0" th:attr="data-id= ${overSizeVehicleId}, data-cost= ${overSizeVehicleCost}">
                                        <img src="/img/carTypeThree.png" alt="" th:text="#{StationDetailHtml.overSizeVehicleFlg}" />
                                    </li>
                                </ul>
                            </div>
                            <div class="type">
                                <label th:text="#{StationDetailHtml.reservationDay}" >预约日期</label>
                                <!--<input id = "reservationDay" type="text" onchange="reservationDayChange()" class="select date Wdate" onClick="WdatePicker({el:'reservationDay',minDate:'%y-%M-%d'})" style="width:110px;"/>-->
                                <input id = "reservationDay" type="text" onchange="reservationDayChange()" class="select date Wdate" onfocus="WdatePicker({el:'reservationDay',readOnly:true,isShowClear:false,minDate:'%y-%M-%d',maxDate:'%y-{%M+2}-%d'})" style="width:110px;"/>
                            </div>
                            <div class="type">
                                <label th:text="#{StationDetailHtml.reservationTime}">预约时间</label>
                                <div class="select">
                                    <input id = "reservationStartTime" type="text" onchange="reservationStartTimeChange()" class="Wdate" onClick="WdatePicker({dateFmt:'H:mm',isShowToday:false,isShowClear:false})" style="width:60px;"/>
                                    <span class="line">-</span>
                                    <input id = "reservationEndTime" type="text" onchange="reservationEndTimeChange()" class="Wdate" onClick="WdatePicker({dateFmt:'H:mm',isShowToday:false,isShowClear:false})" style="width:60px;"/>
                                </div>
                            </div>
                        </div>
                        <p><label>可预约数: <span class="count" id = "residualNumber">5</span> </label></p>
                        <p><label>预约费用:<span class="ymb">￥<span class="rmbNumber" id = "cost">0.00</span> </span> </label></p>
                        <div class="payment">
                            <div class="online-payment">
                                <input type="radio" name="payment" id="onlinePayment" select="selected" />
                                <span class="online-payment-custom active"></span>
                                <label for="onlinePayment">在线支付</label>
                            </div>
                            <div class="shop-payment">
                                <input type="radio" name="payment" id="shopPayment" />
                                <span class="shop-payment-custom"></span>
                                <label for="shopPayment">到店支付</label>
                            </div>
                        </div>
                        <button class="btn reserve-btn" id = "btnSubscribeNow">立即预约</button>
                    </div>
                </div>
            </div>
            <!--订单-->
            <div id="light" class="pay">
                <a href="javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"  class="btn-colse"></a>

                <p  class="pay-succeed">
                    <img src="../img/succeed.png" alt="" />
                    尊敬的
                    <span>刘先生</span>
                    您的预约订单已提交成功</p>

                <div class="pay-content">
                    <p style="color:#fc6500;text-align: center;font-size: 16px;">预约详情</p>
                    <p>高新区会展店</p>
                    <p>车辆类型: <span>小型车</span></p>
                    <p>车牌号码: <span>鲁A52645</span></p>
                    <p>支付金额: <span style="color:#ff0000;font-size: 16px;font-weight:bold;">¥200.00</span></p>
                    <p>预约日期: <span>2017年10月21日 13:00-15:00</span></p>
                    <p>站点地址: <span >高新区会展西路26号</span></p>
                </div>

                <form action="">
                    <input type="radio" name="payonline" value="支付宝" checked="checked" /><img src="../img/zhifubao.jpg" alt="支付宝" />
                    <input type="radio" name="payonline" value="微信支付"  /><img src="../img/weixin.jpg" alt="微信支付" />
                    <input type="radio" name="payonline" value="银联支付" /><img src="../img/yinlian.jpg" alt="银联支付" />
                </form>

                <a href="/selfCheck" onclick = "confirmPay()" class="paybtn">确认支付</a>

            </div>

            <div id="fade" class="black_overlay"></div>
            <!--检测站介绍-->
            <div class="evaluate-list">
                <ul>
                    <li class="active"><span>服务评价 <em th:text="'('+ ${reviewCount} + ')'">(27)</em> </span></li>
                    <li><span>检测站介绍</span></li>
                    <li><span>服务介绍</span></li>
                    <li><span>注意事项</span></li>
                </ul>
            </div>
            <div class="evaluate-detail-group">
                <!--服务评价-->
                <div class="evaluate-detail  evaluate-detail-show" id = "reviewInfoListTab">
                    <iframe th:src = "'/review/getReviewList?stationIdForReview='+${stationId}" frameborder = "no" scrolling="no" id ="iframeReviewList" style="width:100%"> </iframe>
                </div>
                <!--检测站介绍-->
                 <div class="evaluate-detail">
                     <div class="modular">
                        <h3 class="evaluate-detail-title">站点简介</h3>
                        <p>
                            济南华源汽车检测有限公司是按照国家法律法规，于2016年5月正式筹建，公司位于山东省济南市历下区工业南路与 奥体西路交叉口往北300米路西，是经山东省交警总队，山东省环保厅批准，由山东省质量技术监督局认证和许可的机动 车检测机构，并受济南市交警支队和济南市环保局委托向济南市车辆提供科学、公正的机动车安全检测、环保检测服务， 可承接客户的委托检验和国家有关机构的指定检验，出具有法律效力的检测报告。
                            本公司是独立法人单位，承担第三方公正检测结果，公司具备所开展项目要求的人员、设备、环境设施条件以及相应 的技术能力和管理能力；保证独立、客观、公正地从事检测工作，对此承担相应的法律责任；并承诺不从事与检测项目有 关的产品开发、推广、咨询和经营等活动。
                            本单位最高管理者、技术负责人、质量负责人及各部门主管均有相应的技术职称和任命文件，人员结构合理，有多年 汽车维修及检测工作经验。且根据山东省质量技术监督局和山东省环保厅要求，所有人员严格培训持证上岗，以保证公司 提供规范、公正、准确、高效的服务。本公司本着以人为本、服务至上的宗旨，竭诚为广大车主朋友提供最优质、可靠的 服务。  
                        </p>
                     </div>
                    <div class="modular">
                      <h3 class="evaluate-detail-title">站点地址</h3>
                         <img src="/img/addressSite.png" alt="" />
                     </div>
                 </div>
                  <!--服务介绍-->
                 <div class="evaluate-detail" >
                     <div class="modular">
                        <h3 class="evaluate-detail-title">车检流程</h3>
                        <img src="/img/inspectionProcess.png" alt="" />
                    </div>
                    <div class="modular">
                        <h3 class="evaluate-detail-title">场地布局导示</h3>
                        <img src="/img/flexGuide.png" alt="" />
                     </div>
                 </div>
                  <!--注意事项-->
                 <div class="evaluate-detail">
                   <div class="modular">
                       <h3 class="evaluate-detail-title">需携带证件资料</h3>
                       <p>1.1．车;</p>
                       <p>2．行驶证。正副本齐全;</p>
                       <p>3．有效期为1年且在有效期内的机动车第三者责任保险单。如果是分期付款没有保险单原件的，拿保险单复印件（盖保险公司章）、保险卡，说明理由;</p>
                    <p>4．身份证明和身份证明复印件。注意原件和复印件都要，身份证复印件要沿边缘剪好。单位的车需代办人的身份证明。</p>
                   </div>
                    <div class="modular">
                       <h3 class="evaluate-detail-title">车检前的准备工作</h3>
                       <p>1．检查保单是否有误，特别是新车第一次年检，保险单上的信息与实际情况不符的到保险公司更正;</p>
                       <p>2．如果您需要更换环保标志，提前到环保局的汽修厂测完尾气，节省时间</p>
                       <p>3．到交通队清违章</p>
                       <p>4．年检一定要赶前别赶后，每月初验车会很快;</p>
                       <p>5．注意事项：灭火器、停车牌。</p>
                   </div>
                 </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>